<!DOCTYPE html>
<html lang="en">

<head>

  <head>
    <title>Video.js | HTML5 Video Player</title>
    <script src='jquery.js'></script>
    <link href="video-js.css" rel="stylesheet">
    <script src="videojs-ie8.min.js"></script>
    <script src="video.js"></script>

  </head>

</head>

<body>
  <div style="width:100%" id='frame'>
  <video id="example_video_1"   class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" poster="" data-setup="{}">
    <source src="http://ofemd3glz.bkt.clouddn.com//v/nexus4.mp4" type="video/mp4">
    
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
  </div>
</body>

</html>
<script>
var player = videojs(
  'example_video_1', 
  { 
    preload: "auto",
    width:$('#frame').width(),
    controlBar: {
      muted: true,
      RemainingTimeDisplay:true,

    }
  }, 
  function() {
    console.log('Good to go!');

    this.currentTime(1000); // if you don't trust autoplay for some reason

    // this.width($('#frame').width());
    
    // How about an event listener?
    this.on('click', function() {

      console.log(this.duration());
    });
  }
);

$(function(){
  $(window).resize(function(){
    player.width($('#frame').width());
  })
})

</script>